﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>面试管理</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .page-title {
            text-align: center;
            margin: 30px 0;
            color: #333;
            font-size: 24px;
        }

        .layui-form {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .layui-form-item {
            margin-bottom: 25px;
        }

        .btn-container {
            text-align: center;
            margin-top: 30px;
        }

        .layui-input, .layui-select, .layui-textarea {
            border-radius: 4px;
        }

            .layui-input:focus, .layui-select:focus, .layui-textarea:focus {
                border-color: #5FB878;
            }
    </style>
</head>
<body>
    <!-- 面试人员列表区域 -->
    <div class="container" style="margin-top:40px;">
        <h1 class="page-title">面试管理</h1>
        <div class="layui-form" style="margin-bottom: 20px;display:flex;align-items:center;gap:10px;">
            <input type="text" id="searchName" placeholder="请输入员工名称" autocomplete="off" class="layui-input" style="width:180px;">
            <input type="text" id="searchInterviewer" placeholder="请输入面试官姓名" autocomplete="off" class="layui-input" style="width:180px;">
            <button class="layui-btn layui-btn-normal" id="searchBtn">搜索</button>
            <button class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
            <button class="layui-btn layui-btn-warm" id="exportBtn">导出</button>
        </div>
        <table id="interviewTable" lay-filter="interviewTable"></table>
    </div>
    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['form', 'laydate', 'layer', 'table'], function(){
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var table = layui.table;

            // 静态数据示例
            var tableData = [
                {name:'测试5', phone:'15888888888', gender:'男', level:'', feedback:'', result:'备选', count:0, time:'', interviewer:'', action:'邀请面试'},
                {name:'测试4', phone:'15888888888', gender:'男', level:'', feedback:'', result:'备选', count:0, time:'', interviewer:'', action:'邀请面试'},
                {name:'测试8', phone:'15888888888', gender:'男', level:'', feedback:'', result:'备选', count:0, time:'', interviewer:'', action:'邀请面试'},
                {name:'测试6', phone:'15888888888', gender:'男', level:'', feedback:'', result:'备选', count:0, time:'', interviewer:'', action:'邀请面试'},
                {name:'测试21', phone:'15888888888', gender:'男', level:'', feedback:'', result:'备选', count:0, time:'', interviewer:'', action:'邀请面试'},
                {name:'测试9', phone:'15888888888', gender:'男', level:'', feedback:'', result:'备选', count:0, time:'', interviewer:'', action:'邀请面试'},
                {name:'测试23', phone:'15888888888', gender:'男', level:'', feedback:'', result:'面试', count:0, time:'', interviewer:'', action:'邀请面试'},
                {name:'测试22', phone:'15888888888', gender:'男', level:'', feedback:'', result:'面试', count:0, time:'', interviewer:'', action:'邀请面试'},
                {name:'测试24', phone:'15888888888', gender:'男', level:'', feedback:'', result:'面试', count:0, time:'', interviewer:'', action:'邀请面试'},
                {name:'测试', phone:'15888888888', gender:'男', level:'', feedback:'', result:'备选', count:0, time:'', interviewer:'', action:'邀请面试'},
                {name:'测试10', phone:'15888888888', gender:'男', level:'', feedback:'', result:'备选', count:0, time:'', interviewer:'', action:'邀请面试'}
            ];
            // 渲染表格
            table.render({
                elem: '#interviewTable',
                data: tableData,
                page: true,
                limit: 10,
                cols: [[
                    {field:'name', title:'人员名称', width:120},
                    {field:'phone', title:'联系电话', width:140},
                    {field:'gender', title:'用户性别', width:80, align:'center', templet:function(d){return '<span class="layui-badge layui-bg-blue">'+d.gender+'</span>';}},
                    {field:'level', title:'定级', width:80},
                    {field:'feedback', title:'面试反馈', width:120},
                    {field:'result', title:'面试结果', width:100, templet:function(d){return '<button class="layui-btn layui-btn-xs">'+d.result+'</button>';}},
                    {field:'count', title:'面试次数', width:90, align:'center'},
                    {field:'time', title:'面试时间', width:120},
                    {field:'interviewer', title:'面试官', width:100},
                    {field:'action', title:'操作', width:120, templet:function(){return '<a href="javascript:;" class="layui-btn layui-btn-link layui-btn-xs invite-btn">✎邀请面试</a>';}}
                ]],
                text: {none: '暂无数据'}
            });

            // 搜索功能（仅前端过滤示例）
            document.getElementById('searchBtn').onclick = function(){
                var name = document.getElementById('searchName').value.trim();
                var interviewer = document.getElementById('searchInterviewer').value.trim();
                var filtered = tableData.filter(function(item){
                    var matchName = !name || item.name.indexOf(name) > -1;
                    var matchInterviewer = !interviewer || (item.interviewer && item.interviewer.indexOf(interviewer) > -1);
                    return matchName && matchInterviewer;
                });
                table.reload('interviewTable', {data: filtered});
            };
            // 重置功能
            document.getElementById('resetBtn').onclick = function(){
                document.getElementById('searchName').value = '';
                document.getElementById('searchInterviewer').value = '';
                table.reload('interviewTable', {data: tableData});
            };
            // 导出功能（简单导出为JSON示例）
            document.getElementById('exportBtn').onclick = function(){
                var data = table.cache['interviewTable'] || [];
                var blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
                var url = URL.createObjectURL(blob);
                var a = document.createElement('a');
                a.href = url;
                a.download = 'interview_list.json';
                a.click();
                URL.revokeObjectURL(url);
            };

            // 弹窗表单内容（原表单）
            var formHtml = `
            <form class='layui-form' style='padding:20px 30px 0 0;'>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>人员编码</label>
                    <div class='layui-input-block'>
                        <input type='text' name='code' lay-verify='required' placeholder='请输入' autocomplete='off' class='layui-input'>
                    </div>
                </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>人员名称</label>
                    <div class='layui-input-block'>
                        <input type='text' name='name' lay-verify='required' placeholder='请输入' autocomplete='off' class='layui-input'>
                    </div>
                </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>证件信息</label>
                    <div class='layui-input-block'>
                        <input type='text' name='idinfo' lay-verify='required' placeholder='请输入' autocomplete='off' class='layui-input'>
                    </div>
                </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>归属部门</label>
                    <div class='layui-input-block'>
                        <select name='department' lay-filter='aihao'>
                            <option value=''></option>
                            <option value='1'>沧州赤辰塑业有限公司</option>
                        </select>
                    </div>
                </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>岗位</label>
                    <div class='layui-input-block'>
                        <select name='position' lay-filter='aihao'>
                            <option value=''></option>
                            <option value='1'>员工</option>
                            <option value='2'>部门经理</option>
                            <option value='3'>项目经理</option>
                            <option value='4'>董事长</option>
                        </select>
                    </div>
                </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>角色</label>
                    <div class='layui-input-block'>
                        <select name='role' lay-filter='aihao'>
                            <option value=''></option>
                            <option value='1'>开发人员</option>
                            <option value='2'>生产主管</option>
                        </select>
                    </div>
                </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>面试官</label>
                    <div class='layui-input-block'>
                        <input type='text' name='interviewer' lay-verify='required' placeholder='请输入' autocomplete='off' class='layui-input'>
                    </div>
                </div>
                <div class='layui-inline'>
                    <label class='layui-form-label'>面试时间</label>
                    <div class='layui-input-inline layui-input-wrap'>
                        <div class='layui-input-prefix'>
                            <i class='layui-icon layui-icon-date'></i>
                        </div>
                        <input type='text' name='date' id='popupDate' lay-verify='date' placeholder='yyyy-MM-dd' autocomplete='off' class='layui-input'>
                    </div>
                </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>面试次数</label>
                    <div class='layui-input-block'>
                        <input type='text' name='count' lay-verify='required' placeholder='请输入' autocomplete='off' class='layui-input'>
                    </div>
                </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>定级级别</label>
                    <div class='layui-input-block'>
                        <input type='text' name='level' lay-verify='required' placeholder='请输入' autocomplete='off' class='layui-input'>
                    </div>
                </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>定级职级</label>
                    <div class='layui-input-block'>
                        <input type='text' name='level2' lay-verify='required' placeholder='请输入' autocomplete='off' class='layui-input'>
                    </div>
                </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>期望薪资</label>
                    <div class='layui-input-block'>
                        <input type='text' name='salary' lay-verify='required' placeholder='请输入' autocomplete='off' class='layui-input'>
                    </div>
                </div>
                <div class='layui-form-item layui-form-text'>
                    <label class='layui-form-label'>面试反馈</label>
                    <div class='layui-input-block'>
                        <textarea placeholder='请输入内容' class='layui-textarea'></textarea>
                    </div>
                </div>
                <div class='layui-form-item layui-form-text'>
                    <label class='layui-form-label'>备注</label>
                    <div class='layui-input-block'>
                        <textarea placeholder='请输入内容' class='layui-textarea'></textarea>
                    </div>
                </div>
                <div class='btn-container'>
                    <button type='submit' class='layui-btn layui-btn-normal' lay-submit lay-filter='popupFormSubmit'>提交</button>
                    <button type='reset' class='layui-btn layui-btn-primary'>重置</button>
                </div>
            </form>`;

            // 事件委托，点击邀请面试弹窗
            table.on('tool(interviewTable)', function(obj){
                if(obj.event === 'invite'){
                    openInviteLayer();
                }
            });
            // 兼容静态按钮
            document.body.addEventListener('click', function(e){
                if(e.target && e.target.classList.contains('invite-btn')){
                    openInviteLayer();
                }
            });
            function openInviteLayer(){
                layer.open({
                    type: 1,
                    title: '邀请面试',
                    area: ['600px', '90%'],
                    content: formHtml,
                    success: function(layero, index){
                        form.render();
                        laydate.render({
                            elem: '#popupDate',
                            trigger: 'click'
                        });
                        // 表单提交
                        form.on('submit(popupFormSubmit)', function(data){
                            layer.msg('邀请成功', {icon:1, time:2000});
                            layer.close(index);
                            return false;
                        });
                    }
                });
            }
        });
    </script>
</body>
</html>
